<template>
	<view >
		<view class="play">
			<u-bar-height></u-bar-height>
			<view class="back" @tap="back"><uni-icons type="back" size="26" color="#fff"></uni-icons></view>
			
			<view :style="{height: height+'px'}">
				<video id="myVideo" :src="mvUrl" autoplay="true" direction="-90" :style="{height: height+'px'}"></video>
			</view>
			
			<view class="info_box">
				<view class="info_box_item">
					<view><uni-icons type="hand-up" color="#fff" size="26"></uni-icons></view>
					<view class="">{{shareCount}}</view>
				</view>
				<view class="info_box_item">
					<view><uni-icons type="redo" color="#fff" size="26"></uni-icons></view>
					<view class="">{{subCount}}</view>
				</view>
				<view class="info_box_item" @tap="popup">
					<view><uni-icons type="chat" color="#fff" size="26"></uni-icons></view>
					<view class="">{{commentCount}}</view>
				</view>
			</view>
			
			<view class="song_info">
				<view>{{artistName}}</view>
				<view>{{name}}</view>
			</view>
		</view>
		<u-popup-comment :list="comments" :total="total"></u-popup-comment>
	</view>
</template>

<script>
	import {videoDetail, playVideo, comment} from '@/API/API.js';
	import util from '@/utils/util.js';
	export default {
		data(){
			return{
				height: 0,
				name: '',
				artistName: '',
				shareCount: 0,
				subCount: 0,
				commentCount: 0,
				mvUrl: '',
				comments: [],
				total: 0
			}
		},
		
		onLoad(option) {
			let height = uni.getWindowInfo().screenHeight;
			console.log(height)
			this.height = height;
			
			this.videoDetail(option);
			this.playVideo(option);
			this.comment(option.mid);
		},
		
		methods: {
			back(){
				util.jump('navigateBack', '');
			},
			
			videoDetail(id){
				videoDetail(id).then(data => {
					let result = data.data;
					this.name = result.name;
					this.artistName = result.artistName;
					this.shareCount = result.shareCount;
					this.subCount = result.subCount;
				});
			},
			
			playVideo(id){
				playVideo(id).then(data => {
					this.mvUrl = data.data.url;
				}).catch(err => {
					if(err == '系统错误'){
						uni.showToast({ title: '打开失败！', icon: 'error', duration: 2000 });
						setTimeout(()=>{
							util.jump('navigateBack', '');
						},2500);
					}
				})
			},
			
			comment(id){
				comment({id: id, type: 1}).then(data => {
					this.commentCount = data.total;
					this.total = data.total;
					data.hotComments.forEach((val,key) => {
						data.hotComments[key].time = util.formatDate(val.time);
					})
					this.comments = data.hotComments;
				})
			},
			
			popup(){
				uni.$emit('popupComment', 'popupComment');
			}
		}
	}
</script>

<style>
	.play{
		overflow-y: hidden !important;
		position: relative;
	}
	
	.back{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
		padding: 10px;
	}
	
	#myVideo{
		width: 100%;
		height: 100%;
	}
	
	.info_box{
		position: absolute;
		bottom: 7%;
		right: 4%;
		z-index: 99;
	}
	
	.info_box_item{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 6px;
		color: #fff;
		font-size: 12px;
	}
	
	.song_info {
		width: 86%;
		position: absolute;
		bottom: 7%;
		left: 2%;
		z-index: 99;
		color: #fff;
		line-height: 1.8;
	}
	
	.song_info view:first-child{
		font-size: 14px !important;
	}
	
	.song_info:last-child view{
		font-size: 12px;
	}
</style>